<template>
  <div class="div1">
    <!-- 面包屑 -->
    <MBX l1="数据统计" l2="数据报表"></MBX>
    <!-- 卡片 -->
    <el-card class="xia">
      <div id="main" ref="dom"></div>
      <h1>强大的Echarts</h1>
    </el-card>
    <h2>
      坚持把简单的事情做好就是不简单，坚持把平凡的事情做好就是不平凡。所谓成功，就是在平凡中做出不平凡的坚持。
    </h2>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
  name: '',
  components: {},
  data() {
    return {
      mychart: null,
      // 文档给的
      text: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    // 需要在这里面进行调用  因为下面获取了dom元素
    this.getMarth()
    window.addEventListener('resize', this.mychart.resize) //   （resize）  echarts给的方法
  },
  methods: {
    // 获取数据
    async getMarth() {
      const dom = this.$refs.dom // 获取dom元素
      this.mychart = echarts.init(dom) // 固定写法
      // console.log(chart)
      const res = await this.$QHL.Marthapi()
      console.log(res)
      const option = { ...this.text, ...res } // 进行合并
      this.mychart.setOption(option) // 固定写法 放入数据
      // console.log('11111111111::::', this.mychart)
    }
  }
}
</script>
<style scoped lang="scss">
.div1 {
  overflow: hidden;
  height: 100vh;
  border-radius: 40px;
  padding: 10px 20px;
  background-image: linear-gradient(
    to right,
    #eea2a2 0%,
    #bbc1bf 19%,
    #57c6e1 42%,
    #b49fda 79%,
    #7ac5d8 100%
  );
  .el-card {
    //   width: 600px;
    //   height: 600px;
    //   background-image: linear-gradient(
    //     to right,
    //     #eea2a2 0%,
    //     #bbc1bf 19%,
    //     #57c6e1 42%,
    //     #b49fda 79%,
    //     #7ac5d8 100%
    //   );
    //   border-radius: 50%;
    //   margin: 0 auto;
    //   #main {
    //     margin-top: 100px;
    //   }
    // }
    // p {
    //   position: absolute;
    //   top: -320px;
    //   left: 740px;
    //   span {
    //     font-size: 500px;
    //     color: #fff;
    //   }
    #main {
      width: 100%;
      height: 400px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
      font-family: '华文彩云';
      font-size: 48px;
      text-shadow: 5px 5px 5px red;
    }
  }
  h2 {
    font-size: 26px;
    text-align: center;
    background-image: -webkit-linear-gradient(bottom, pink, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: '华文彩云';
    margin-top: 50px;
  }
}
</style>
